<template>
  <view class="tab-bar">
    <nut-tabbar
      :bottom="true"
      @tab-switch="tabSwitch"
      unactive-color="#2C2C2C"
      active-color="#1E74FD"
    >
      <nut-tabbar-item tab-title="消息">
        <template #icon>
          <i
            class="iconfont icon-rili-yiwancheng"
            style="font-size: 46rpx"
          ></i>
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item
        tab-title="工作台"
        icon="category"
      >
        <template #icon>
          <i
            class="iconfont icon-huiyishi"
            style="font-size: 40rpx"
          ></i>
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item
        tab-title="文档"
        icon="category"
      >
        <template #icon>
          <i
            class="iconfont icon-huiyishi"
            style="font-size: 40rpx"
          ></i>
        </template>
      </nut-tabbar-item>
      <nut-tabbar-item
        tab-title="通讯录"
        icon="category"
      >
        <template #icon>
          <i
            class="iconfont icon-huiyishi"
            style="font-size: 40rpx"
          ></i>
        </template>
      </nut-tabbar-item>
    </nut-tabbar>
  </view>
</template>

<script setup lang="ts">
import { userInfoStore } from "@/stores/userInfoStore";
import Taro from "@tarojs/taro";
const store = userInfoStore();
const props = defineProps(["tabsBottomSwitch"]);
const emit = defineEmits(["tabsBottomSwitch"]);
const tabSwitch = (item, index) => {
  userInfoStore().tabsBottomSwitch = index;
  emit("tabsBottomSwitch", index);
  console.log(item, index)
};
</script>

<style lang="less">
@import url(./index.less);
</style>
